<template>
    <div>
        <div class="topBtn">
            <div class="sizeBig"><span>工单管理</span></div>
            <div>
                <el-button type="primary" icon="el-icon-delete">强制下线</el-button>
                <el-button type="primary" icon="el-icon-search">发送消息</el-button>
                <el-button type="primary" icon="el-icon-delete">强制下线</el-button>
                <el-button type="primary" icon="el-icon-search">发送消息</el-button>
            </div>
        </div>
        <div class="message">
            <p class="character">1.可以查看当前登录系统的用户、地址等数据</p>
            <p class="character">2.可以给在线用户发送消息，通告等等；可以在系统维护或者临时紧急发布版本时，将在线用户强制下线。 <span class="skip">查看帮助文档</span></p>
        </div>
        <div class="inputcontent">
            <el-input v-model="search" placeholder="请输入关键字查询" class="inSearch"></el-input>
            <div class="iconSearch"></div>
            <el-select v-model="value" placeholder="请选择付款时间">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="table">
            <Table></Table>   
        </div>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import Table from './components/workOrderTable'
export default {
    name:'workOrder',
    components:{
        Table
    },
    methods:{
        handleCurrentChange(){

        }
    }
}
</script>

<style scoped lang="scss">
.sizeBig{
    font-size: 16px;
}
.topBtn{
    height: 60px;
    width: 98%;
    margin: 0 auto;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
}
.message{
    width:98%;
    margin: 0 auto;
    height:100px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(238,238,238,1);
    font-size:14px;
    .character{
        margin: 20px 0 21px 20px;
        color:#999999;
        .skip{
            color: #0095FF;
            margin-left:10px;
            cursor:pointer; 
        }
    }
}
.inputcontent{
    width:98%;
    margin: 0 auto;
    height: 80px;
    position: relative;
    padding-top:21px;
    box-sizing: border-box; 
    .iconSearch{
        position: absolute;
        left: 277px;
        top:30px;
        width:20px;
        height: 20px;
        background-image: url('./image/搜索.png') ;
        background-repeat: no-repeat;
        cursor:pointer; 
    }
    .inSearch{
        width:308px;
        height:40px;
    }
}
.table{
    width: 98%;
    margin: 0 auto;
}
.block{
    text-align: right;
    margin:28px 20px 0 0; 
}
</style>
